<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>User Interface Color Names</TITLE>
     <link rel="stylesheet" type="text/css" href="../ss/2.css" id="thecss">
     <script type="text/javascript" src="../scripts/csschange.js"></script>

</HEAD>

<BODY onload="readSS()">

<h1 align="center"><span class="pagetitle">User Interface Color Names</span><br>
<font size=2>= <span class="sitetitle">Index DOT Html/Css</span> by <a href="../misc/email.htm">Brian Wilson</a> =</font></h1>

<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
     <td align=left>Index DOT Html: <font size=2>
     <a href="../html/index.html">Main Index</a> | <a href="../html/tree/htmltree.htm">Element Tree</a> |
     <a href="../html/tagindex/a.htm">Element Index</a> | <a href="../html/supportkey/a.htm">HTML Support
     History</a></font><br>
     Index DOT Css: <font size=2><a href="../css/index.html">Main Index</a> |
     <a href="../css/propindex/font.htm">Property Index</a> |
     <a href="../css/supportkey/syntax.htm">CSS Support History</a> |
     <a href="../history/browsers.htm">Browser History</a></font></td>
</tr>
</table>
</center>


<br><br>
<div align=center>
<table border=3 cellspacing=0 cellpadding=5>
<tr>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ActiveBorder" style="background-color: ActiveBorder">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Active window border color" title="Active window border color"></td></tr></table>
       <b class="colorname">ActiveBorder</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ActiveCaption" style="background-color: ActiveCaption">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Active window caption color" title="Active window caption color"></td></tr></table>
       <b class="colorname">ActiveCaption</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="AppWorkspace" style="background-color: AppWorkspace">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Background color of the application work area" title="Background color of the application work area"></td></tr></table>
       <b class="colorname">AppWorkspace</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="Background" style="background-color: Background">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Desktop background color" title="Desktop background color"></td></tr></table>
       <b class="colorname">Background</b></th>
</tr>
<tr>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ButtonFace" style="background-color: ButtonFace">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Surface color of system 3D widgets" title="Surface color of system 3D widgets"></td></tr></table>
       <b class="colorname">Buttonface</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ButtonHighlight" style="background-color: ButtonHighlight">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Color of 3D widget edges facing UI lightsource" title="Color of 3D widget edges facing UI lightsource"></td></tr></table>
       <b class="colorname">ButtonHighlight</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ButtonShadow" style="background-color: ButtonShadow">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Color of 3D widget edges away from UI lightsource" title="Color of 3D widget edges away from UI lightsource"></td></tr></table>
       <b class="colorname">ButtonShadow</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ButtonText" style="background-color: ButtonText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Text color on system 3D widgets" title="Text color on system 3D widgets"></td></tr></table>
       <b class="colorname">ButtonText</b></th>
</tr>
<tr>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="CaptionText" style="background-color: CaptionText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Text color in active window captions" title="Text color in active window captions"></td></tr></table>
       <b class="colorname">CaptionText</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="GrayText" style="background-color: GrayText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Disabled text color" title="Disabled text color"></td></tr></table>
       <b class="colorname">GrayText</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="Highlight" style="background-color: Highlight">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Background color of selected items" title="Background color of selected items"></td></tr></table>
       <b class="colorname">Highlight</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="HighlightText" style="background-color: HighlightText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Text color of selected items" title="Text color of selected items"></td></tr></table>
       <b class="colorname">HighlightText</b></th>
</tr>
<tr>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="InactiveBorder" style="background-color: InactiveBorder">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Inactive window border color" title="Inactive window border color"></td></tr></table>
       <b class="colorname">InactiveBorder</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="InactiveCaption" style="background-color: InactiveCaption">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Inactive window caption Background color" title="Inactive window caption Background color"></td></tr></table>
       <b class="colorname">InactiveCaption</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="InactiveCaptionText" style="background-color: InactiveCaptionText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Text color in inactive window captions" title="Text color in inactive window captions"></td></tr></table>
       <b class="colorname">InactiveCaptionText</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="InfoBackground" style="background-color: InfoBackground">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Background color for system tooltips/balloons" title="Background color for system tooltips/balloons"></td></tr></table>
       <b class="colorname">InfoBackground</b></th>
</tr>
<tr>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="InfoText" style="background-color: InfoText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Text color for system tooltips/balloons" title="Text color for system tooltips/balloons"></td></tr></table>
       <b class="colorname">InfoText</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="Menu" style="background-color: Menu">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Menu Background color" title="Menu Background color"></td></tr></table>
       <b class="colorname">Menu</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="MenuText" style="background-color: MenuText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Menu text color" title="Menu text color"></td></tr></table>
       <b class="colorname">MenuText</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="Scrollbar" style="background-color: Scrollbar">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Scrollbar non-active area color" title="Scrollbar non-active area color"></td></tr></table>
       <b class="colorname">Scrollbar</b></th>
</tr>
<tr>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ThreeDDarkShadow" style="background-color: ThreeDDarkShadow">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Dark gradient color for 3D element shadow" title="Dark gradient color for 3D element shadow"></td></tr></table>
       <b class="colorname">ThreeDDarkShadow</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ThreeDFace" style="background-color: ThreeDFace">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Face color for 3D display elements" title="Face color for 3D display elements"></td></tr></table>
       <b class="colorname">ThreeDFace</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ThreeDHighlight" style="background-color: ThreeDHighlight">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Light gradient color for 3D element highlight" title="Light gradient color for 3D element highlight"></td></tr></table>
       <b class="colorname">ThreeDHighlight</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ThreeDLightShadow" style="background-color: ThreeDLightShadow">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Dark gradient color for 3D element highlight" title="Dark gradient color for 3D element highlight"></td></tr></table>
       <b class="colorname">ThreeDLightShadow</b></th>
</tr>
<tr>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="ThreeDShadow" style="background-color: ThreeDShadow">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Light gradient color for 3D element shadow" title="Light gradient color for 3D element shadow"></td></tr></table>
       <b class="colorname">ThreeDShadow</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="Window" style="background-color: Window">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Window Background color" title="Window Background color"></td></tr></table>
       <b class="colorname">Window</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="WindowFrame" style="background-color: WindowFrame">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Color of the border around windows" title="Color of the border around windows"></td></tr></table>
       <b class="colorname">WindowFrame</b></th>
   <th valign="top" align="center">
       <table border=1 cellspacing=0 bgcolor="WindowText" style="background-color: WindowText">
       <tr><td><IMG src="../images/trans.gif" width="25" height="25"
       alt="Window text color" title="Window text color"></td></tr></table>
       <b class="colorname">WindowText</b></th></tr>
</table>
</div>

<br>
<big><b class="mainheading">Notes</b></big>
<ul>
    <li>The results in these color swatches should be taken from the UI color
        settings on your system. If your browser does not understand these
        names, it may interpret them as RGB values.
    <li>UI keyword descriptions are stored in the box's ALT and TITLE attributes. 
        Hovering over the color box will expose a tooltip with the description in 
        most browsers.
</ul>

<br>
<a href="../misc/copyright.htm">Boring Copyright Stuff...</a>
<br>

</BODY>
</HTML>